<template>
  <div>
		<van-nav-bar  title="办理入住" left-arrow @click-left="$utils.back($route.path)" />
		<div  class="bg-white br-16 pd-24 mg-24" v-if="occupantList.length > 0">	
			<div class="fs-28 fw-b mb-24">入住人信息</div>
			<li class="ads-item h-184 plr-24 ptb-32" v-for="(item,index) in occupantList" :key="index">
				<div class="flex-s-c ">
					<div class="flex-1">
						<div class="flex flex-s-c">
							<div class="flex flex-v-c"><p class="mr-10 fs-32 fw-b">{{ item.UserName }}</p><p class="user">入住人</p></div>
							<div class="fs-28 fw-b">{{ item.UserTel }}</div>
						</div>
						<div class="flex flex-s-c mt-14">
							<div class="fs-28 color-gray-light">身份证 {{ item.UserIdentityCard }}</div>
							<div @click="goAddCheckIn(item,index)">查看信息<svg-icon icon-class="right" class="fs-24 ml-10" @goPage="goAddCheckIn(item,index)"/></div>
						</div>
					</div>
				</div>
			</li>
		</div>
		<div class="add" @click="goAddCheckIn()">添加入住人</div>
		<div class="fixed-bottom bg-white ptb-16 plr-40">
			<button class="bg-primary color-white placeorder" @click.stop="submit">完成入住</button>
		</div>
		<van-popup v-model="showCheckIn" position="bottom" style="height:100vh;">
      <addCheckIn :checkInData="checkInMsg.data" :checkInIndex="checkInMsg.index" @close="showCheckIn=false" @checkIn="checkIn" @deleteCheckIn="deleteCheckIn" :isEdit="isEdit"  />
    </van-popup>
	</div>
</template>
<script>
import { setTimeout } from 'timers'
import addCheckIn from './addCheckIn.vue'
import { OrderBookInByStore } from 'api/teaHouse'
export default {
	components:{
		addCheckIn
	},
	data(){
		return {
			showCheckIn: false,
			checkInMsg: {
				data: {},
        index: -1,
			},
			occupantList:[],
			postData:{
				isOrderBookIn: 1,
			},
			isEdit: true, //添加入住人是否可编辑
		}
	},
	created(){
		this.postData.orderId = this.$route.params.id
	},
	methods:{
		goAddCheckIn(item = {},index = -1){
			this.showCheckIn = true
			this.checkInMsg.data = item
			this.checkInMsg.index = index
			console.log(item,index,this.checkInMsg,"是是是")
		},
		checkIn(checkIn, index) {
      this.showCheckIn = false
      let _index = index
      if (index === -1) {
        _index = this.occupantList.length
        this.occupantList.push(checkIn)
      } else {
        this.occupantList[index] = checkIn
      }
      //this.changeAddress(address, _index)
			console.log(this.occupantList,index,"yyy")
			this.$forceUpdate()
    },
    deleteCheckIn(index) {
      this.showCheckIn = false
      this.occupantList.splice(index, 1)
      this.$forceUpdate()
    },
		submit(){
			if(this.occupantList.length > 0){
				this.postData.orderBookMemberList = this.occupantList
				OrderBookInByStore(this.postData).then(res =>{
					if(res.Data){
						this.$router.push('/roomManageOrderList')
						setTimeout(()=>{
							this.$toast('入住成功')
						},200)
					}
				})
			}
		},
	}
	
}
</script>
<style lang="scss" scoped>
.placeorder{
	width: 670px;
	height: 88px;
	line-height: 88px;
	border-radius: 44px;
	text-align: center;
	font-size: 32px;
}
.ads-item{
	width: 654px;
	height: 158px;
	background: #F7F7FA;
	border-radius: 16px;
	margin-bottom: 24px;
}
.ads-item:last-child{
	margin-bottom: 0;
}
.user{
	border-radius: 6px;
	border: 1px solid #979797;
	padding: 2px 5px;
	color: #999;
}
.add{
	width: 632px;
	height: 80px;
	line-height: 80px;
	border-radius: 45px;
	border: 2px solid $primary15;
	text-align: center;
	font-size: 32px;
	color: $primary15;
	margin: 48px auto 0;
}
.addCheckIn{
	width: 100%;
}
</style>
